<template>
  <div>
    <!--按下回车触动事件-->
    <input @keyup.enter="onEnter" type="text" v-model="msg" v-if="show" ref="inputText">
    <button @click="getFocus">点我展示输入框并且获取输入框焦点</button>
    <button @click="removeItem">点我删除记录</button>
    <h1>{{ H1Msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "Son",
  data() {
    return {
      //控制输入框展示的开关
      show: false,
      //输入框输入的信息
      msg: '',
      H1Msg: ''
    }
  },
  methods: {
    getFocus() {
      this.show = true;
      //nextTick  回调会在DOM更新完成后去触发  使我们可以通过ref操作到最新的DOM结构  通过focus方法获取其焦点
      this.$nextTick(() => {
        this.$refs.inputText.focus();
      })
    },
    onEnter() {
      this.H1Msg = this.msg;
      window.localStorage.setItem("msg", this.H1Msg);

    },
    //删除按钮触发函数
    removeItem() {
      window.localStorage.clear();
    }
  },
  //在组件挂载完成时去获取本地存储的数据
  mounted() {
    this.H1Msg = window.localStorage.getItem("msg");
  },


}
</script>

<style scoped>

</style>
